<template>
  <div class="select-location">
    <!-- Header with back button -->
    <div class="header">
      <div class="left" @click="goBack">
        <van-icon name="arrow-left" />
      </div>
      <div class="title">选择收货地址</div>
      <div class="right"></div>
    </div>
    
 
    
    <!-- 当前定位 -->
    <div class="current-location">
      <div class="location-item" @click="selectCurrentLocation">
        <van-icon name="location-o" class="location-icon" />
        <div class="location-info">
          <div class="location-name">{{currentLocation}}</div>
          <div class="location-address">泸州市龙马潭区香林路1号</div>
        </div>
        <van-icon name="arrow" class="arrow-icon" />
      </div>
    </div>
    
    <!-- 搜索结果 -->
    <div class="search-results" v-if="searchResults.length > 0">
      <div class="section-title">搜索结果</div>
      <div 
        class="location-item" 
        v-for="(item, index) in searchResults" 
        :key="index"
        @click="selectLocation(item)"
      >
        <van-icon name="location-o" class="location-icon" />
        <div class="location-info">
          <div class="location-name">{{item.name}}</div>
          <div class="location-address">{{item.address}}</div>
        </div>
        <van-icon name="arrow" class="arrow-icon" />
      </div>
    </div>
    
    <!-- 附近地点 -->
    <div class="nearby-locations">
      <div class="section-title">附近地点</div>
      <div 
        class="location-item" 
        v-for="(item, index) in nearbyLocations" 
        :key="index"
        @click="selectLocation(item)"
      >
        <van-icon name="location-o" class="location-icon" />
        <div class="location-info">
          <div class="location-name">{{item.name}}</div>
          <div class="location-address" v-if="item.address">{{item.address}}</div>
        </div>
        <van-icon name="arrow" class="arrow-icon" />
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';

export default {
  data() {
    return {
      searchKeyword: '',
      currentLocation: '泸州职业技术学院(东华校区)-4栋',
      searchResults: [],
      nearbyLocations: [
        { 
          name: '泸州职业技术学院-东门', 
          address: '泸州市龙马潭区香林路11号' 
        },
        { 
          name: '泸州职业技术学院-南门', 
          address: '泸州市龙马潭区香林路12号' 
        },
        { 
          name: '泸州职业技术学院(东华校区)-4栋', 
          address: '泸州市龙马潭区香林路1号' 
        },
        { 
          name: '西南医科大学城北校区-西门', 
          address: '泸州市江阳区忠山路三段319号' 
        },
        { 
          name: '泸州万象汇购物中心', 
          address: '泸州市江阳区江阳南路52号' 
        },
        { 
          name: '泸州万达广场', 
          address: '泸州市江阳区江阳中路66号' 
        },
        { 
          name: '泸州步行街', 
          address: '泸州市江阳区江阳中路128号' 
        },
        { 
          name: '龙马潭区人民医院', 
          address: '泸州市龙马潭区龙马大道二段76号' 
        },
        { 
          name: '泸州江阳中路商业街', 
          address: '泸州市江阳区江阳中路' 
        },
        { 
          name: '泸州高铁站', 
          address: '泸州市龙马潭区龙马大道三段1088号' 
        }
      ]
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    searchAddress() {
      if (!this.searchKeyword) {
        Toast('请输入地址关键词');
        return;
      }
      
      Toast.loading({
        message: '搜索中...',
        forbidClick: true
      });
      
      // 模拟搜索过程
      setTimeout(() => {
        // 过滤出匹配的附近地点
        this.searchResults = this.nearbyLocations.filter(location => 
          location.name.includes(this.searchKeyword) || 
          (location.address && location.address.includes(this.searchKeyword))
        );
        
        // 如果没有匹配项，添加一个默认结果
        if (this.searchResults.length === 0) {
          this.searchResults = [
            {
              name: this.searchKeyword,
              address: '泸州市',
              isSearchResult: true
            }
          ];
        }
        
        Toast.clear();
      }, 500);
    },
    selectCurrentLocation() {
      this.selectLocation({
        name: this.currentLocation,
        address: '泸州市龙马潭区香林路1号'
      });
    },
    selectLocation(location) {
      // 将选中的地址传回上一页
      this.$router.replace({
        path: '/add-address',
        query: {
          name: location.name,
          address: location.address || ''
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.select-location {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f7f7;
  
  .header {
    height: 100px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    
    .left {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      
      .van-icon {
        font-size: 28px;
        color: #333;
      }
    }
    
    .title {
      font-size: 32px;
      font-weight: 500;
      color: #333;
    }
    
    .right {
      width: 50px;
    }
  }

  .section-title {
    padding: 15px 20px;
    font-size: 28px;
    color: #666;
    background-color: #f7f7f7;
  }
  
  .current-location, .search-results, .nearby-locations {
    margin-bottom: 20px;
  }
  
  .location-item {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 22px 20px;
    position: relative;
    
    &:not(:last-child)::after {
      content: "";
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 0;
      height: 1px;
      background-color: #f0f0f0;
    }
    
    .location-icon {
      font-size: 36px;
      color: #ff9500;
      margin-right: 15px;
    }
    
    .location-info {
      flex: 1;
      padding-right: 20px;
      
      .location-name {
        font-size: 28px;
        color: #333;
        margin-bottom: 8px;
        font-weight: 500;
      }
      
      .location-address {
        font-size: 24px;
        color: #999;
      }
    }
    
    .arrow-icon {
      font-size: 28px;
      color: #999;
    }
  }
}
</style> 